<!-- 页面头部 -->
<template>
  <div class="lb-header">
    <div class="lb-left">
      <div class="logo">
        <el-image
        class="logo-img"
        :src="routesItem.logo"
        fit="cover"
       @click="goHome" ></el-image>
      </div>
      <div v-if="isIndex" class="admin-title">
      </div>
      <div v-else class="menu-title">{{$t('menu.' + title)}}</div>
    </div>
    <div class="lb-right">
      <el-link :underline="false" href="/" icon="el-icon-s-home">返回首页</el-link>
      <el-link v-if="isAdmin" :underline="false" :href="agentUrl" icon="el-icon-s-grid">进入代理端</el-link>
      <el-link :underline="false" @click="clearCache" :icon="icon">清除缓存</el-link>
      <el-dropdown v-if="!isWe7" class="user-name" trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          {{username}}
          <i class="el-icon-caret-bottom"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="myaccount">编辑账户</el-dropdown-item>
          <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
// import Bus from '@/Bus.js'
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {
      isIndex: true,
      title: '',
      icon: 'el-icon-s-open',
      isAdmin: window.lbConfig.isWe7 && window.lbConfig.is_founder,
      agentUrl: '',
      username: window.sessionStorage.getItem('ms_username'),
      isWe7: window.lbConfig.isWe7,
      dialogVisible: false
    }
  },
  created () {
    this.handleTitle(this.$route.meta.title)
    this.handleAgentUrl()
    // this.getAppminiConfigInfo()
  },
  computed: {
    ...mapState({
      routesItem: state => state.routes
    })
  },
  methods: {
    ...mapMutations(['changeRoutesItem']),
    async getAppminiConfigInfo () {
      let {code, data} = await this.$api.getAppminiConfigInfo()
      if (code !== 200) return
      this.changeRoutesItem({ key: 'logo', val: data.copyright })
    },
    // 用户名下拉菜单选择事件
    handleCommand (command) {
      if (command === 'myaccount') {
        this.$emit('handleAccount', true)
      } else if (command === 'loginout') {
        this.$api.userlogout().then(res => {
          if (res.code === 200) {
            this.changeRoutesItem({key: 'isAuth', val: false})
            sessionStorage.removeItem('lbtk') // 删除token
            sessionStorage.removeItem('ms_username')
            this.$router.push('/login')
            window.location.reload()
          }
        })
      }
    },
    clearCache () {
      this.icon = 'el-icon-loading'
      this.$api.clearCache().then(res => {
        this.icon = 'el-icon-s-open'
        if (res.code === 200) {
          this.$message.success('清除成功！')
        }
      })
    },
    handleTitle (title) {
      this.isIndex = !title
      this.title = title
    },
    goHome () {
      this.$router.push('/')
    },
    handleAgentUrl () {
      let currentUrl = window.location.href
      let agentUrl = currentUrl.slice(0, currentUrl.indexOf('#')) + '&s=/agent/index'
      this.agentUrl = agentUrl
    }
  },
  watch: {
    $route: {
      handler (val, oldVal) {
        this.handleTitle(val.meta.title)
      },
      // 深度观察监听
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
  .lb-header {
    width: 100%;
    height: 70px;
    position: fixed;
    top: 0;
    left: 0;
    // border-bottom: 1px solid #eff2f6;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;

    .lb-left {
      display: flex;
      height: 70px;
      background: #273543;

      .logo {
        width: 120px;
        height: 70px;
        // background: #273543;
        display: flex;
        justify-content: center;
        align-items: center;

        .logo-img {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background: #fff;
          border: 1px solid #fff;
          cursor: pointer;
        }
      }

      .admin-title {
        padding: 0 32px;
        display: flex;
        align-items: center;
        background: #FFFFFF;

        span {
          margin-right: 5px;
        }
      }

      .menu-title {
        height: 71px !important;
        width: 160px;
        border-right: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
        height: 100%;
        display: flex;
        font-size: 16px;
        color: #101010;
        align-items: center;
        justify-content: center;
        background: #FFFFFF;
      }
    }

    .lb-right {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 30px;
      cursor: pointer;

      .el-dropdown-link {
        cursor: pointer;
      }

      .el-dropdown-menu__item {
        text-align: center;
      }

      span {
        margin: 0 5px 0 10px;
      }

      .el-link {
        margin-left: 10px;
      }
    }
  }
</style>
